﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/public.css">
    <!--<link rel="stylesheet" href="css/font-awesome-4.5.0/css/font-awesome.min.css" />-->
    <title>营销管理</title>
    <style>
        body{
            overflow-x: hidden;
        }
        .containeritem{
            width:90%;
            margin:0 auto;
            position:relative;
        }
        .contentitem{
            width:100%;
            border:1px solid rgb(46,182,185);
            border-radius:6px;
            margin:14px 0;
            overflow:hidden;
            position:relative;
        }
        .item{
            width:50%;
            text-align:center;
            float:left;
            padding:8px 0;
            color:rgb(46,182,185);
        }
        .active{
            color:#ffffff;
        }
        .picbox{
            float:left;
            width:24%;
            min-height: 20px;
        }
        .msgcontent{
            float:left;
            width:76%;
        }
        .pic{
            border-radius:50%;
            width:74%;
            display: block;
            margin:0 auto;
        }
        .person{
            font-size: 18px;
            line-height: 26px;
        }
        .time{
            float:right;
            font-size: 14px;
        }
        .done{
            /*padding:10px 0;*/
            font-size:16px;
            color:rgb(140,140,140);
        }
        .objs span{
            font-size: 14px;
            color:rgb(46,182,185);
            display:inline-block;
        }
        .fr{
            float:right;
        }
        .fl{
            float:left;
        }
        .personalmsg{
            padding:8px 0;
            border-bottom:2px solid rgb(230,230,230);
        }


        /*  我发出的  */
        .project{
            padding:8px 0;
            border-bottom: 2px solid rgb(230,230,230);
        }
        .icon{
            color: rgb(46,182,185);
            font-size:22px;
            padding:0 8px;
        }
        .iconnodo{
            color: rgb(150,150,150)
        }
        .jobdelection{
            width:50%;
            float:left;
        }
        .jobtime{
            width:50%;
            float:left;
        }
        .prodoing{
            color: rgb(46,182,185);
            border: 1px solid  rgb(46,182,185);
        }
        .prodone{
            color: rgb(150,150,150);
            border: 1px solid  rgb(150,150,150);
        }
        .pronodo{
            color: rgb(255,150,150);
            border: 1px solid  rgb(255,150,150);
        }
        .box{
            width:4.2em;
            display: block;
            text-align: center;
            font-size: 14px;
            padding:0.2em 0;
            border-radius: 4px;
            margin:0 auto 8px;

        }
        .hadtime{
            font-size:14px;
            color:rgb(200,200,200);
        }
        .proname{
            font-size:18px;
            color:rgb(100,100,100);
        }
        .pronum{
            font-size:13px;
            color:rgb(180,180,180);
        }
        .pername{
            font-size:13px;
            color:rgb(180,180,180);
            line-height: 34px;
            display: inline-block;
        }
        .itemproject{
            width:100%;
            position:absolute;
        }
        #bg{
            height:100%;
            position:absolute;
            width:50%;
            background:rgb(46,182,185);
            z-index:-1;
        }
        .arrowing{
            width:32px;
            display: inline-block;
            margin-bottom:-10px;
        }
        .pd{
            line-height: 40px;
        }
        .newpro{
            width:100%;
            position: fixed;
            bottom: 0;
            background: rgb(244,244,244);
            text-align: center;
            color:rgb(46,182,185);
            font-size:22px;
            padding:14px 0;
        }
        .fs20{
            font-size:20px;
        }
        .fs14{
            font-size:14px;
        }
        .fs12{
            font-size:12px;
        }
        .fs18{
            font-size:18px;
        }
        .lh{
            line-height:26px;
        }
        .iconpic{
            width:30px;
            margin-bottom: -8px;
        }
        .iconpic1{
            width:26px;
        }

        .tc{
            border-bottom: 2px solid rgb(230,230,230);
            padding:10px 0 8px;
        }
        .fc1{
            color:rgb(100,100,100)
        }
        h1{
            color:#fff;
        }
        .tleheader{
            background: rgb(46,182,185);
            border:none;
        }
    </style>
</head>
<body>
    <header class="tleheader">
        <p class="backbtn"><a style="margin:0;">
            <img src="../icon/arrow/zjt.PNG" class="backpic" alt="">
            <span>返回</span></a>
        </p>
        <h1 class="tc" style="border: none;padding:0;">营销管理</h1>
        <p class="somebtn">
            <span><a href="rmzygl.html">管理</a></span>
        </p>
    </header>
<div class="containeritem">
    <div class="contentitem">
        <div class="item active" style="border: none;">人脉</div>
        <div class="item" style="margin-left:-1px;border: none;border-left:1px solid rgb(45,181,185);border-right:1px solid rgb(45,181,185)">公司</div>
        <div class="item" style="margin-left:-1px;">项目</div>
        <div id="bg"></div>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>


    <div class="itemproject" style="left:0;">
            <div class="tc" style="padding-top:0;">
                <img src="../icon/fbhy.png" class="iconpic" alt="">
                <a  href="rmtj.html">
                <span class="fs16 cb">&nbsp;新增人脉</span>
                </a>
                <a href="rmzygl.html">
                    <img src="../icon/fatb.png" class="iconpic1 fr" alt="">
                </a>
                <div class="clear"></div>
            </div>
        <a href="dgrmxq.html">
            <div class="personalmsg">
                <div class="picbox">
                    <img src="../icon/bighead.PNG" class="pic" alt="">
                </div>
                <div class="msgcontent">
                    <p class="lh"><span class="fs16">狄丹阳</span><span class="fs12 fr fc1">最新更新：2016-01-16</span></p>
                    <p class="done fs12">xx公司总经理|空调厂商</p>
                </div>
                <div class="clear"></div>
            </div>
        </a>
    </div>
    <div class="itemproject" style="left:120%;">
        <a  href="rmtj.html">
            <div class="tc" style="padding-top:0;">
                <img src="../icon/fbhy.png" class="iconpic" alt="">
                <span class="fs16 cb">&nbsp;新增公司</span>
                <img src="../icon/fatb.png" class="iconpic1 fr" alt="">
                <div class="clear"></div>
            </div>
        </a>
        <a href="yxrm-3.html">
            <div class="project">
                <p class="lh"><span class="fs14">杭州依隔赛斯科技有限公司</span><span class="fs12 fr fc1">更新：2016-01-16</span></p>
                <p class="lh"><span class="fs12 fc1">标签：空调安装</span><span class="fs12 fr fc1">资质：机电安装二级</span></p>
            </div>
        </a>
    </div>
    <div class="itemproject" style="left:240%;">
        <a  href="xzxmbj.html">
            <div class="tc" style="padding-top:0;">
                <img src="../icon/fbhy.png" class="iconpic" alt="">
                <span class="fs16 cb">&nbsp;新增项目</span>
                <img src="../icon/fatb.png" class="iconpic1 fr" alt="">
                <div class="clear"></div>
            </div>
        </a>
        <a href="yxrm-2.html">
            <div class="project">
                <p class="lh"><span class="fs16">X X空调系统改造</span><span class="fs12 fr fc1">最新更新：2016-01-16</span></p>
                <p class="lh"><span class="fs12 fc1">项目方：X X公司</span><span class="fs12 fr fc1">项目状态：项目营销</span></p>
            </div>
        </a>
    </div>
</div>
<script type="text/javascript" src="../js/back.js"></script>
<script>
    var item = document.getElementsByClassName("item");
    var itempro = document.getElementsByClassName("itemproject");
    var bg = document.getElementById("bg");
    bg.style.width = 100/3 + "%";

    for(var j = 0; j < item.length; j++){
        item[j].setAttribute("class","item");
        item[j].style.color = "rgb(46,182,185)";
        item[j].style.width = 100/3 + "%";
    }

//    bg.style.width = bg.offsetWidth + 1 + "px";

    item[0].style.color = "#fff";
    var itemfunc = new Array();
    var itemprofunc = new Array();
    for(var i = 0; i < item.length; i++){
        itemfunc[i] = function(x){
            item[x].onclick = function(){
                for(var j = 0; j < item.length; j++){
                    item[j].setAttribute("class","item");
                    item[j].style.color = "rgb(46,182,185)";
                    item[j].style.width = 100/3 + "%";
                    var k =  j - x*2;
                    itempro[j].style.transition = "-webkit-transform .2s cubic-bezier(0.75,0.1,0.25,1)";
                    itempro[j].style.webkitTransform = "translateX("+ 120 * k +"%)";
                }
                bg.style.transition = "-webkit-transform .2s cubic-bezier(0.75,0.1,0.25,1)";
                bg.style.webkitTransform = "translateX("+ 100 * x +"%)";
                this.style.color = "rgb(255,255,255)";
            }
        };
        itemfunc[i](i)
    }
</script>
</body>
</html>